<template>
  <div>
    巨树
    <details>
      <summary>summary</summary>
      <p>pppppp</p>
    </details>
    <giant-tree
      :nodes="nodes"
      :setting="setting"
      ref="gTree"
      @onCheck="onCheck"
      @onCreated="onCreated"
      @onRightClick="onRightClick"
    />
  </div>
</template>

<script>
import giantTree from "vue-giant-tree";
const bigData = require("@/mock/tree.json");

export default {
  name: "GiantTreeTest",
  components: { giantTree },
  data() {
    return {
      nodes: [
        { id: 1, pid: 0, name: "随意勾选 1", open: true },
        { id: 11, pid: 1, name: "随意勾选 1-1", open: true },
        { id: 111, pid: 11, name: "随意勾选 1-1-1" },
        { id: 112, pid: 11, name: "随意勾选 1-1-2" },
        { id: 12, pid: 1, name: "随意勾选 1-2", open: true },
        { id: 121, pid: 12, name: "随意勾选 1-2-1" },
        { id: 122, pid: 12, name: "随意勾选 1-2-2" },
        { id: 2, pid: 0, name: "随意勾选 2", checked: true, open: true },
        { id: 21, pid: 2, name: "随意勾选 2-1" },
        { id: 22, pid: 2, name: "随意勾选 2-2", open: true },
        { id: 221, pid: 22, name: "随意勾选 2-2-1", checked: true, nocheck: true },
        { id: 222, pid: 22, name: "随意勾选 2-2-2" },
        { id: 23, pid: 2, name: "随意勾选 2-3" },
      ],
      // nodes: [],
      setting: {
        check: {
          enable: true
        },
        data: {
          simpleData: {
            enable: true,
            pIdKey: "pid",
            // pIdKey: "parentId",
            // idKey: 'indexNo'
          },
          key: {
            // name: 'nodeName',
          }
        },
        view: {
          showIcon: false,
          addDiyDom: this.addDiyDom
        }
      },
      ztreeObj: ''
    }
  },
  created() {
    // this.nodes = this.$ocean.formatTreeData(bigData.data[0])
  },
  methods: {
    // 修改节点name
    addDiyDom(treeId, treeNode) {
      treeNode.nodeName = treeNode.nodeName + ' (1/10)'
      this.$nextTick(() => {
        this.$refs.gTree.ztreeObj.updateNode(treeNode)
      })
    },
    // 勾选回调
    onCheck(event, treeId, treeNode) {
      console.log(event)
      console.log(treeId)
      console.log(treeNode)
      // console.log(111,this.ztreeObj)
      console.log(this.ztreeObj.getCheckedNodes(true));
      // check_Child_State 节点状态 1: 子节点有选中 2: 子节点全选 -1: 无子节点
    },
    // ztree实例化完成
    onCreated(ztreeObj) {
      this.ztreeObj = ztreeObj
    },
    // 节点右键回调
    onRightClick(event, treeId, treeNode) {
      console.log(event)
      console.log(treeId)
      console.log(treeNode)
    }
  }
};
</script>

<style lang="scss" scoped>
</style>